<template>
  <!-- 邀请好友砍价页面  -->
  <div class="invCut">
    <!-- 头部返回 -->
    <div class="invTitle">
      <span>&lt;</span>
      <span></span>
      <span></span>
    </div>
    <!-- 图片展示部分 -->
    <div class="invContent">
      <img
        src="https://img.alicdn.com/imgextra/i2/109454181/O1CN01N12szx1gkwZJScmMH_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"
        alt=""
      />
      <!-- 主题砍价功能部分 -->
      <div class="invMiddleContent">
        <div class="invTimer"><van-count-down :time="time" /><b>后过期</b></div>
        <div class="yuan">
          已砍<span class="invMoney">123424.5</span>元,免费拿仅差百分之
        </div>
        <div class="number">00.3</div>
        <!-- 进度条 -->
        <div class="progress-bar">
          <div class="box">
            <div class="clip" id="context" :style="[Width]"></div>
          </div>
          <span class="times"></span>
        </div>


        
        <div class="invPeople" @click="showPopup">
          预计再邀请2人，直接免费拿
        </div>
      </div>
    </div>
    <!-- 弹出层 -->
    <div class="invDiog">
      <van-popup v-model="show" :style="{ height: '100%', width: '100%' }">
        <!-- 展示列表好友 -->
        <div class="invDiolagTitle">
          <span>&lt;</span>
          <h3>微信好友</h3>
          <span></span>
        </div>
         <div class="invDiogContent" v-for="item in frientList" :key="item.id" ref="copy">
          <img :src="item.titleImg" alt=""/>
          <span class="invName">{{ item.friendName }}</span>
          <p class="timer">{{ item.time }}</p>
          <button @click="copyOdd(item.id)">复制好友信息</button>
          </div>
          
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import Vue from "vue";
import { CountDown } from "vant";
Vue.use(CountDown);
//弹出层

import { Popup } from "vant";
Vue.use(Popup);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      show: false,
      //进度条
      //进度条
      msg: "layout",
      num: 0, //方法一
      test: false,
      Width: {
        width: "14rem",
      },
      //事件倒计时
      time: 30 * 60 * 60 * 1000,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState(["frientList"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //复制粘贴功能
    copyOdd() {
    window.getSelection().removeAllRanges();
      let copyDOM = this.$refs.copy;
      console.log("1,,,",copyDOM )
      let range = document.createRange();
         console.log("2,,,",range )
      range.selectNode(copyDOM);
      window.getSelection().addRange(range);
      try {
        let successful = document.execCommand("copy");
        this.utilHelper.commonFn.toast(
          `${successful ? "复制成功" : "您的手机不支持自动复制，请手动复制~"}`
        );
      } catch (err) {
        console.log("Oops, unable to copy");
      }
    },
      
    ...mapActions(["FriendMsg"]),
    //弹出层
    showPopup() {
      this.FriendMsg();
      this.show = true;
    },
    //进度条
    processbar() {
      this.num++;
      this.Width = {
        width: this.num + "px",
      };
      if (this.num > 120) {
        this.num = 120;
      }
      // console.log("this.num is" +typeof this.num);
      return this.num;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var a = 0;
    var id = setInterval(() => {
      a = this.processbar();
      // console.log("a is"+a+typeof a);
      if (a === 100) {
        clearInterval(id);
        // console.log("执行了clearInterval函数");
      }
    }, 5000);
  },
};
</script>

<style lang="scss" scoped>
.invCut {
  width: 100%;
  height: 100%;
  background: #ffdba4;
  .invTitle {
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ccc;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0 1rem;
  }
}
.invContent {
  width: 100%;
  height: auto;

  img {
    width: 100%;
    height: 16rem;
  }
}
.invMiddleContent {
  width: 85%;
  height: 13rem;
  background: #fff8e8;
  margin: 1rem 6%;
  border-radius: 2rem;
  .invTimer {
    background: #fff;
    display: flex;
    margin: 0rem 20%;
    text-align: center;
    padding: 0.6rem 2rem;
    border-radius: 2rem;
    color: #80703a;
  }
  b {
    margin-left: 0.3rem;
  }
}
.yuan {
  width: 100%;
  height: 2rem;
  margin-top: 1rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
  color: #64492c;
  .invMoney {
    color: #da3424;
    font-weight: bold;
  }
}
.number {
  width: 100%;
  height: 2rem;
  margin-top: 0.2rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1.5rem;
  color: #da3424;
  font-weight: bold;
}
.invprvgross {
  width: 60%;
  height: 2rem;
  overflow: hidden;
  margin-left: 12%;
  margin-top: 0.2rem;
}
//进度条
.clip {
  height: 1rem;
  border-radius: 0.4rem;
  background-color: #fee2b2;
  margin-top: 0.4rem;
  font-size: 1rem;
  margin-left: 2rem;
}
.progress-bar {
  position: relative;
}
.times {
  position: absolute;
  top: -10rem;
  right: 12rem;
  color: #f2f2f2;
}
#number,
.i {
  font-size: 0.3rem;
}
.invPeople {
  width: 70%;
  height: 2.2rem;
  background: #ff6e09;
  text-align: center;
  line-height: 2.2rem;
  color: #fff;
  font-size: 1rem;
  border-radius: 2rem;
  margin: 0.4rem 12%;
  font-weight: bold;
}
.invDiolagTitle {
  width: 100%;
  height: 3rem;
  background: #fba342;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 0 1rem;
  span {
    font-size: 1.6rem;
    font-weight: bold;
  }
}
.invDiogContent {
  width: 100%;
  height: 4rem;
  display: flex;
  margin-top: 1.2rem;
  border-bottom: 1px solid #ccc;
  .invName {
    font-size: 0.8rem;
    font-weight: bold;
  }
  img {
    width: 3rem;
    height: 3rem;
    margin: 0 1rem;
  }
  .timer {
    margin-left: 20%;
  }
  button{
    font-size: 0.6rem;
    width: 5rem;
    height:2rem;
    margin-left: 2rem;
  }
}
</style>  